<template>
  <view class="dict-tag-container">
    <!-- 匹配到的字典项 -->
    <template v-for="(item, index) in options" :key="item.value">
      <template v-if="values.includes(item.value)">
        <!-- 普通文本显示（当没有特殊样式时） -->
        <text
          v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
          :class="['dict-text', item.elTagClass]"
        >{{ item.label }}{{ index < matchedCount - 1 ? separator : '' }}</text>
        
        <!-- 标签显示（有样式时） -->
        <uni-tag
          v-else
          :text="item.label"
          :type="getTagType(item.elTagType)"
          :class="['dict-tag', item.elTagClass]"
          :size="size"
        />
      </template>
    </template>
    
    <!-- 未匹配的项（显示原始值） -->
    <template v-if="unmatch && showValue">
      <text class="dict-unmatch">{{ unmatchArray.join(' ') }}</text>
    </template>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'

// 记录未匹配的项
const unmatchArray = ref([])

const props = defineProps({
  // 字典数据
  options: {
    type: Array,
    default: () => []
  },
  // 当前的值
  value: {
    type: [Number, String, Array],
    default: null
  },
  // 当未找到匹配的数据时，显示value
  showValue: {
    type: Boolean,
    default: true
  },
  // 分隔符（多值时使用）
  separator: {
    type: String,
    default: ' '
  },
  // 标签大小
  size: {
    type: String,
    default: 'small'
  }
})

// 将值转换为数组格式进行统一处理
const values = computed(() => {
  if (props.value === null || typeof props.value === 'undefined' || props.value === '') {
    return []
  }
  
  // 处理字典数据可能是 ref 的情况
  const options = props.options?.value || props.options || []
  if (!Array.isArray(options)) {
    return []
  }
  
  if (Array.isArray(props.value)) {
    return props.value.map(item => String(item))
  }
  
  return [String(props.value)]
})

// 计算匹配的项数量（用于分隔符显示）
const matchedCount = computed(() => {
  if (!Array.isArray(props.options) || props.options.length === 0) {
    return 0
  }
  
  return values.value.filter(value => 
    props.options.some(option => String(option.value) === value)
  ).length
})

// 检查是否有未匹配的项
const unmatch = computed(() => {
  unmatchArray.value = []
  
  // 没有value或options时不显示
  if (
    props.value === null || 
    typeof props.value === 'undefined' || 
    props.value === '' || 
    !Array.isArray(props.options) || 
    props.options.length === 0
  ) {
    return false
  }
  
  let hasUnmatch = false
  values.value.forEach(value => {
    if (!props.options.some(option => String(option.value) === value)) {
      unmatchArray.value.push(value)
      hasUnmatch = true
    }
  })
  
  return hasUnmatch
})

// 将后端的 listClass 映射为 uni-tag 支持的类型
const getTagType = (elTagType) => {
  if (!elTagType) return 'default'
  
  // 类型映射：将常见的后端类型映射为 uni-tag 支持的类型
  const typeMap = {
    // 基础类型
    'default': 'default',
    'primary': 'primary',
    'success': 'success', 
    'warning': 'warning',
    'danger': 'error',
    'error': 'error',
    'info': 'primary',
    
    // 扩展类型映射到基础类型
    'secondary': 'default',
    'light': 'default', 
    'dark': 'default',
    'violet': 'primary',
    'pink': 'error',
    'cyan': 'primary',
    'orange': 'warning',
    'indigo': 'primary',
    'teal': 'success',
    'lime': 'success',
    'amber': 'warning',
    'blue': 'primary',
    'green': 'success',
    'red': 'error',
    'yellow': 'warning',
    'purple': 'primary',
    'gray': 'default',
    'black': 'default'
  }
  
  return typeMap[elTagType] || 'default'
}
</script>

<style lang="scss" scoped>
.dict-tag-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  
  .dict-text {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
  }
  
  .dict-tag {
    margin: 0;
  }
  
  .dict-unmatch {
    font-size: 12px;
    color: #999;
    font-style: italic;
  }
}

/* 支持自定义CSS类样式 */
:global(.text-red) {
  color: #ff4d4f !important;
}

:global(.text-green) {
  color: #52c41a !important;
}

:global(.text-blue) {
  color: #1890ff !important;
}

:global(.text-orange) {
  color: #fa8c16 !important;
}

:global(.text-purple) {
  color: #722ed1 !important;
}

:global(.text-pink) {
  color: #eb2f96 !important;
}

:global(.text-cyan) {
  color: #13c2c2 !important;
}

:global(.text-yellow) {
  color: #fadb14 !important;
}

:global(.text-violet) {
  color: #722ed1 !important;
}

:global(.text-indigo) {
  color: #2f54eb !important;
}

:global(.text-teal) {
  color: #08979c !important;
}

:global(.text-lime) {
  color: #7cb305 !important;
}

:global(.text-amber) {
  color: #fa8c16 !important;
}

:global(.text-gray) {
  color: #8c8c8c !important;
}

:global(.text-dark) {
  color: #262626 !important;
}

:global(.text-light) {
  color: #d9d9d9 !important;
}

:global(.text-black) {
  color: #000000 !important;
}

:global(.text-secondary) {
  color: #595959 !important;
}
</style>
